<!--
  *@Description : In user setting edit
  *@author 萧红
  *@date 2020-04-05 18:26
  *@LastEditTime 2020-04-05 18:26
  *@LastEdititors 创建订单
-->
<template>
    <div id="createOrder">
      <template v-if="!isSelectAddress">
        <tittle :title="'创建订单'"></tittle>
        <div :style="{height: $inerHeight +55+ 'px'}">
          <!--新增地址-->
          <div class="add-address" @click="toNewPage('/addaddress')" v-if="addressData.length === 0">
            <i class="cubeic-edit"></i>
            添加收货地址
          </div>
          <!--显示默认地址-->
          <div v-else class="select-address" @click="isSelectAddress=true">
            <i class="cubeic-arrow"></i>
            <div class="info">
              <div style="float:left">收件人：{{selectedAddress.name}}</div>
              <div style="float:right">{{selectedAddress.phone}}</div>
            </div>
            <div class="reserve-address">收件地址：{{allAddress}}</div>
          </div>
          <p class="buy_address_line"></p>
          <div class="shop-title">
            cos官方商城
          </div>
          <div class="pro">
            <div class="pro-img">
              <img :src="data.selectedStyle.img" alt="">
            </div>
            <div class="pro-info">
              <div class="name">{{data.productName}}</div>
              <div class="select">{{data.selectedStyle.name}} {{data.selectedStyle.size}}</div>
              <div class="priceAndNumber">
                <span class="price">￥{{data.selectedStyle.price}}</span>
                <span class="number">x {{data.buyNumber}}</span>
              </div>
            </div>
          </div>
          <!--运费-->
          <div class="yunfei">
            <span style="float:left">运费</span>
            <span style="float:right;text-align: right;color:#ff4466">+{{data.youfei}}</span>
          </div>
          <!--留言-->
          <div class="message">
            <input type="text" v-model="message" maxlength="20" placeholder="向店主留言">
          </div>
          <!--总计-->
          <div class="count">
            总计:
            <span>{{data.buyNumber * data.selectedStyle.price}}</span>
          </div>
          <div class="bottom">
            <div class="money">实付款：
              <span class="f10">￥</span>
              <span class="total-price">{{data.buyNumber * data.selectedStyle.price + data.youfei}}</span>
            </div>
            <div class="submit-btn" @click="submitOrder">提交订单</div>
          </div>
        </div>
      </template>
      <template v-else>
          <select-address :data="addressData" :selected="selectIndex" @change="selectAddressChange" @close="isSelectAddress=false"></select-address>
      </template>
    </div>
</template>

<script>
import Tittle from '../../components/Tittle'
import SelectAddress from './SelectAddress'
export default {
  name: 'createOrder',
  components: {
    Tittle,
    SelectAddress
  },
  computed: {
    allAddress () {
      return this.selectedAddress.province + this.selectedAddress.city + this.selectedAddress.county + this.selectedAddress.address
    }
  },
  data () {
    return {
      // 这个data接受的是上个页面传入的参数
      data: {
      },
      addressData: [], // 从后台获取的所有地址数据
      selectedAddress: {}, // 用户选择的地址数据
      selectIndex: 0, // 选择的地址下标为多少
      message: '', // 用户留言数据
      isSelectAddress: false// 是否显示选择地址界面
    }
  },
  created () {
    this.data = JSON.parse(this.$route.query.data)
    // console.log(this.data)
  },
  mounted () {
    let params = {userId: localStorage.getItem('userId')}
    this.apis.getAddress(params).then(res => {
      if (res.code === 200) {
        this.addressData = res.data
        this.addressData.forEach((item, index) => {
          if (item.default === 1) {
            this.selectedAddress = item // 首先选择的地址是默认地址
            this.selectIndex = index + ''
          }
        })
      } else {
        this.$toast(res.message, 'error')
      }
    })
  },
  methods: {
    selectAddressChange (selectAddress, index) {
      this.selectedAddress = selectAddress
      this.isSelectAddress = false
      this.selectIndex = index + ''
    },
    submitOrder () {
      let tempData = {
        selectedAddress: this.selectedAddress,
        data: this.data,
        message: this.message,
        allAddress: this.allAddress
      }
      tempData.selectedStyle = tempData.data.selectedStyle
      delete tempData.data.selectedStyle
      sessionStorage.setItem('payData', JSON.stringify(tempData))
      this.$router.push({path: '/pay'})
    }
  }
}
</script>

<style scoped lang="stylus">
  @import "../../../node_modules/stylus-px2rem"
#createOrder
{
  text-align left
  background-color #f0f0f0
  &>div{
    background-color white
  }
  .add-address
  {
    background: white;
    padding: 0.5rem 2rem;
    text-align: center;
    color: #ff4466;
    font-size 6px
  }
  .select-address
  {
    position relative
    padding 2px 5px
    box-sizing border-box
    i
    {
      font-size 8px
      position absolute
      right: 5px
      top: 50%
      transform translateY(-50%)
    }
    .info
    {
      width: 85%
      height: 10px
      overflow hidden
      font-size 6px
      color:#555
    }
    .reserve-address
    {
      width 95%
      line-height 10px
      font-size:6.5px
      color:#999
      padding 2px 0px
    }
  }
  .buy_address_line
  {
    margin: 2px 0;
    background: url('../../../static/line_address.png') repeat-x;
    height: 6px;
    background-size: auto 6px;
  }
  .shop-title
  {
    width: 100%
    height: 15px
    line-height: 20px
    text-align left
    color:deeppink
    padding 2px 2px
    box-sizing content-box
  }
  .pro
  {
    width 100%
    display flex
    flex-flow row nowrap
    align-items center
    padding 2px 5px
    border-bottom 1px solid #f0f0f0
    .pro-img
    {
      width 35px
      height 35px
      margin-right 5px
      img
      {
        width: 100%
        height: 100%
      }
    }
    .pro-info
    {
      width 70%
      height: 40px
      text-align left
      display flex
      flex-flow column nowrap
      justify-content space-around
      padding 0px 2px
      color #555
      font-size 6px
      .name
      {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .select
      {
        color #999
      }
      .priceAndNumber
      {
        overflow hidden
        padding-right 5px
        .price
        {
          float:left;
          font-size: 8px;
          color: #ff4466;
        }
        .number{float:right}
      }
    }
  }
  .yunfei
  {
    width: 100%
    height 20px
    line-height 10px
    padding 5px 5px
    box-sizing border-box
    border-bottom 1px solid #f0f0f0
    span
    {
      width 50%
      font-size 6px
    }
  }
  .message
  {
    padding 2px 0x
    width: 100%
    height 20px
    line-height 10px
    padding 0px 5px
    box-sizing border-box
    border-bottom 1px solid #f0f0f0
    input
    {
      padding 0px 2px
      height: 19px
      display inline-block
    }
    input:focus
    {
      outline none
    }
  }
  .count
  {
    padding 2px 0x
    width: 100%
    height 25px
    line-height 25px
    padding 0px 5px
    text-align right
    box-sizing border-box
    font-size 7px
    span
    {
      font-size 8px
      color #ff4466
    }
  }
  .bottom
  {
    height: 20px;
    line-height: 20px;
    width: 100%;
    background: white;
    position: fixed;
    left: 0px;
    bottom: 0px;
    box-shadow: 0 0 4px rgba(0,0,0,.4);
    z-index: 111;
    overflow hidden
    .money
    {
      float: left !important;
      margin-left: 5px;
      font-size 7px
      .f10
      {
        color #ff4466
      }
      .total-price
      {
        font-size 10px
        color:#ff4466
      }
    }
    .submit-btn
    {
      width: 50px
      text-align center
      outline none
      position: absolute;
      right: 0px;
      bottom: 0px;
      background: #ff4466;
      color: white;
      height: 20px;
      line-height: 20px;
    }
  }
}
</style>
